<template>
  <div class="slides-preview">
    <!-- <el-carousel :interval="5000" arrow="always" type="card">
      <el-carousel-item v-for="(slide, index) in slides" :key="index">
        <div class="marpit" v-html="slide"></div>
      </el-carousel-item>
    </el-carousel> -->
    <el-scrollbar height="100VH">
      <div v-for="(slide, index) in slides" :key="index" class="marpit" v-html="slide"></div>
      </el-scrollbar>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import { ElCarousel, ElCarouselItem } from 'element-plus';
import {QCarousel,QCarouselSlide} from "quasar";
import 'element-plus/dist/index.css'; // 引入 Element Plus 样式
import Marp from '@marp-team/marp-core';

const slides = reactive([]); // 存储渲染后的幻灯片内容
const props = defineProps({
  markdownContent: String,
});

onMounted(() => {
  renderSlides();
});

const renderSlides = () => {
  if (typeof props.markdownContent !== 'string' || !props.markdownContent.trim()) {
    console.error('Invalid Markdown content.');
    slides.length = 0; // 清空幻灯片内容
    return;
  }

  try {
    const marp = new Marp();

    // 渲染 Markdown 内容为 HTML（包含 SVG）
    const { html, css } = marp.render(props.markdownContent);

    // 动态插入 CSS
    if (css) {
      const style = document.createElement('style');
      style.type = 'text/css';
      style.innerHTML = css;
      document.head.appendChild(style);
    }

    // 确保 html 内容不为空，并且包含 <svg> 元素
    if (html) {
      // 使用正则提取所有的 <svg> 标签
      const svgContent = html.match(/<svg[^>]*>[\s\S]*?<\/svg>/g) || [];

      // 将每个 <svg> 作为独立的幻灯片
      slides.splice(0, slides.length, ...svgContent);
    } else {
      console.error('Marp rendered empty HTML.');
    }
  } catch (error) {
    console.error('Error rendering slides:', error);
  }
};
</script>

<style scoped>
.slides-preview {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.marpit {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.marpit svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 2em;
}

p {
  font-size: 1.5em;
}
</style>
